<template>
  <div class="main" ref="main">
    <el-backtop :visibility-height="400" :bottom="70">
      <el-tooltip effect="dark" content="回到顶部" placement="left">
        <i class="el-icon-caret-top"></i>
      </el-tooltip>
    </el-backtop>
    <div :class="['header',headerClass]">
      <div class="name">
        <h2>{{website.webName}}</h2>
      </div>
      <div class="opt">
        <div class="search">
          <div class="search-img"></div>
          <input class="search-input" type="text">
        </div>
        <div class="menu">
          <ul>
            <li><router-link to="/" class="menu-active">首页</router-link></li>
            <li><router-link to="/">分类</router-link></li>
            <li><router-link to="/">时间轴</router-link></li>
            <li>
              <el-dropdown trigger="click">
                <span>
                  <a href="javascript:;">外链<i class="el-icon-arrow-down el-icon--right"></i></a>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item v-for="item in hrefList" :key="item.bannerId"><a style="text-decoration: none;color: #000" :href="item. bannerHref">{{item.bannerName}}</a></el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="top" :style="cssObj.topStyle">
      <div class="info">
        <div class="logo" :style="cssObj.logoStyle"></div>
        <div class="text">
          <h2 v-text="website.profile1"></h2>
          <h2 v-text="website.profile2"></h2>
        </div>
      </div>
    </div>
    <div class="list">
      <div class="blog-list">
        <div v-for="item in articleList" class="blog-item" :key="item.articleId">
          <h3 class="title"><a :href="'article/detail?articleId='+item.articleId">{{ item.title }}</a></h3>
          <p class="profile">{{item.profile}}</p>
          <div class="blog-info">
            <div class="author">
              作者：{{item.author}}
            </div>
            <div class="apply-time">
              发表时间：{{item.applyTime}}
            </div>
          </div>
          <div class="category">
            <el-tag size="mini" style="margin-right: 5px;cursor: pointer;" type="success" offect="dark" v-for="ca in item.categoryList" :key="ca.categoryId">{{ca.categoryName}}</el-tag>
          </div>
        </div>
      </div>
    </div>
    <div class="footer"></div>
  </div>
</template>

<script>
export default {
  name: 'Index',
  data () {
    return {
      website: {
        webName: '个人博客',
        profile1: '晚来天欲雪，能饮一杯无？',
        profile2: 'No Sleep! Go Happy!',
        logo: '31417c29-9422-4b4c-8f11-7c2f31359571.jpg'
      },
      bannerList: [
        {
          bannerUrl: 'a61b4ed8-2f8e-4687-ad97-e15f19aaefaa.jpg'
        }, {
          bannerUrl: '2f76ad5a-c011-4e31-bf63-0ed299598b24.jpg'
        }, {
          bannerUrl: 'c5ea7348-ba63-4847-b274-3f8dc1a591af.jpg'
        }
      ],
      bannerIndex: 0,
      hrefList: [
        {
          bannerId: 1,
          bannerName: 'github',
          bannerHref: 'https://www.github.com'
        }, {
          bannerId: 2,
          bannerName: 'gitee',
          bannerHref: 'https://www.gitee.com'
        }, {
          bannerId: 3,
          bannerName: '知乎',
          bannerHref: 'https://www.zhihu.com'
        }
      ],
      baseImageUrl: process.env.VUE_APP_BASE_API + '/img/',
      interVal: '',
      headerClass: 'absolute-header',
      scrollTop: 0,
      clientHeight: 0,
      page: 1,
      articleList: []
    }
  },
  computed: {
    cssObj () {
      return {
        topStyle: {
          background: `url(${this.baseImageUrl + this.bannerList[this.bannerIndex].bannerUrl}) no-repeat center/cover`
        },
        logoStyle: {
          background: `url(${this.baseImageUrl + this.website.logo}) no-repeat center/cover`
        }
      }
    }
  },
  methods: {
    setTopImage () {
      this.bannerIndex = parseInt((Math.random() * (this.bannerList.length)) + '')
    },
    /* 滚动条滚动事件处理方法 */
    handlerScroll (e) {
      /* 获取滚动条滚动的高度 */
      this.scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      /* 判断高度值来控制样式 */
      if (this.scrollTop > this.clientHeight / 2) {
        this.headerClass = 'fixed-header'
      } else {
        this.headerClass = 'absolute-header'
      }
    },
    getWebsite () {
      this.$http.get('api/website').then(data => {
        this.website = data.data
      })
    },
    getBannerList () {
      this.$http.get('api/banner').then(data => {
        this.bannerList = data.data
      })
    },
    getHrefList () {
      this.$http.get('api/href').then(data => {
        this.hrefList = data.data
      })
    },
    getArticleList () {
      this.$http.get(`api/article/page/${this.page}`).then(data => {
        this.articleList.push(...data.data.records)
        this.page++
      })
    }
  },
  created () {
    this.$nextTick(() => {
      this.setTopImage()
      /* 获取可视区域高度 */
      this.clientHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
      this.getWebsite()
      this.getBannerList()
      this.getHrefList()
      this.getArticleList()
    })
  },
  mounted () {
    this.interVal = setInterval(() => {
      this.setTopImage()
    }, 1000 * 60 * 5)
    window.addEventListener('scroll', this.handlerScroll, true)
  },
  destroyed () {
    clearInterval(this.interVal)
    window.removeEventListener('scroll', this.handlerScroll)
  }
}
</script>

<style scoped lang="scss">
.main{
  .top{
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    .info{
      display: flex;
      .logo{
        height: 100px;
        width: 100px;
        border-radius: 50%;
      }
      .text{
        color: white;
        text-align: center;
        height: 100px;
        margin-left: 20px;
        h2{
          margin: 10px auto 30px;
        }
      }
    }
  }
  .header{
    height: 60px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    .name{
      padding-left: 15px;
    }
    .opt{
      display: flex;
      align-items: center;
      .search{
        height: 30px;
        width: 200px;
        background-color: #fff;
        border-radius: 16px;
        border: 1px solid grey;
        overflow: hidden;
        display: flex;
        .search-img{
          height: 30px;
          width: 30px;
          background: url("../assets/search.svg") no-repeat center;
        }
        .search-input{
          display: block;
          height: 30px;
          border: none;
          outline: none;
        }
      }
      .menu{
        width: 300px;
        margin: 0 30px;
        ul{
          height: 60px;
          list-style: none;
          display: flex;
          justify-content: space-between;
          align-items: center;
          li{
            width: 50px;
            text-align: center;
            a{
              text-decoration: none;
            }
            a:hover{
              border-bottom: 2px solid greenyellow;
            }
          }
        }
      }
    }
    .menu-active{
      border-bottom: 2px solid greenyellow !important;
    }
  }
  .list{
    width: 1080px;/*主流的宽度：760px。980px。1080px*/
    margin: 0 auto;
    display: flex;
    .blog-list{
      width: 780px;
      .blog-item{
        width: 90%;
        margin: 20px auto 60px;
        .title{
          white-space: nowrap;/*设置文本不换行*/
          overflow: hidden;/*超出部分隐藏*/
          text-overflow: ellipsis;/*溢出部分自动改换为省略号*/
          margin-bottom: 10px;
          a{
            color: black;
            text-decoration: none;
          }
          a:hover{
            color: cornflowerblue;
          }
        }
        .profile{
          display: -webkit-box;/*盒子模型*/
          -webkit-line-clamp: 2;/*设置最多展示2行*/
          -webkit-box-orient: vertical;/*设置子元素的排列方式*/
          overflow: hidden;
          margin-bottom: 10px;
        }
        .blog-info{
          display: flex;
          justify-content: space-between;
          margin-bottom: 10px;
        }
      }
    }
  }
}

.absolute-header{
  position: absolute;
  left: 0;
  top: 0;
  background-color: rgba(255,255,255,0);
  border-bottom: none;
  .name>h2{
    color: #fff;
  }
  a{
    color: #fff;
  }
}
.fixed-header{
  position: fixed;
  left: 0;
  top: 0;
  background-color: rgba(255,255,255,1);
  border-bottom: 1px solid greenyellow;
  .name>h2{
    color: #000;
  }
  a{
    color: #000;
  }
}

</style>
